<template>
  <div class="container">
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>重置密码</span>
      </div>
      <!-- 表单 -->
      <el-form
        :model="pwdForm"
        :rules="pwdFormRules"
        ref="pwdFormRef"
        label-width="100px"
      >
        <el-form-item
          label="原密码"
          prop="old_pwd"
        >
          <el-input
            v-model="pwdForm.old_pwd"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="新密码"
          prop="new_pwd"
        >
          <el-input
            v-model="pwdForm.new_pwd"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认新密码"
          prop="re_pwd"
        >
          <el-input
            v-model="pwdForm.re_pwd"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="updatePwdFn"
          >修改密码</el-button>
          <el-button @click="reserFn">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<script>
import { updatePwdAPI } from "../../../../api/index";
export default {
  name: "UserPwd",
  data() {
    // 新密码与旧密码不能相同
    const samePwd = (rules, value, callback) => {
      // value是校验规则对应的值
      if (this.pwdForm.old_pwd === value) {
        callback(new Error("新旧密码不能相同"));
      } else {
        callback(); //通过校验
      }
    };
    // 确认密码与新密码一致
    const rePwd = (rules, value, callback) => {
      if (this.pwdForm.new_pwd !== value) {
        callback(new Error("两次输入的密码不同"));
      } else {
        callback();
      }
    };
    return {
      // 表单的数据对象
      pwdForm: {
        old_pwd: "",
        new_pwd: "",
        re_pwd: "",
      },

      // 表单的验证规则对象
      pwdFormRules: {
        old_pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^\S{6,15}$/,
            message: "密码长度必须是6-15位的非空字符串",
            trigger: "blur",
          },
        ],
        new_pwd: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            pattern: /^\S{6,15}$/,
            message: "密码长度必须是6-15位的非空字符串",
            trigger: "blur",
          },
          { validator: samePwd, trigger: "blur" },
        ],
        re_pwd: [
          { required: true, message: "请再次确认新密码", trigger: "blur" },
          {
            pattern: /^\S{6,15}$/,
            message: "密码长度必须是6-15位的非空字符串",
            trigger: "blur",
          },
          { validator: rePwd, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 更新密码 点击事件
    updatePwdFn() {
      this.$refs.pwdFormRef.validate(async (valid) => {
        if (valid) {
          const pwdData = {
            newPwd: this.pwdForm.new_pwd,
            oldPwd: this.pwdForm.old_pwd,
          };
          const res = await updatePwdAPI(pwdData);
          console.log("11111", res);
          if (res.status !== 0) return this.$message.error("更新失败稍后再试");
          this.$message.success("更新密码成功");
          this.$refs.pwdFormRef.resetFields();
          // 重置密码 被动退出
          this.$store.commit("UPDATETOKEN", {});
          this.$store.commit("UPDATEUSERINFO", {});
          this.$router.push("/login");
        } else {
          return false;
        }
      });
    },
    // 重置密码
    reserFn() {
      this.$refs.pwdFormRef.resetFields();
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap; /* 当超出容器宽度时自动换行 */
  height: 90%;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.box-card {
  width: 50%;
}
.el-form {
  width: 90%;
}
::v-deep .el-form-item__content {
  display: flex;
  width: 70%;
  justify-content: center;
  align-items: center;
}
</style>